<template>
  <div class='flex' style="background: #679ee0;">
    <header>
      <div class=" col-lg-6 col-md-6 col-sm-6 col-xs-6">
        <!-- <img src="../../newbootstrap/image/login_title_white.png" alt="格式错误" class="img-responsive img-pad" style="padding: 10px;"/> -->
      </div>
      <div class=" col-lg-6 col-md-6 col-sm-6 col-xs-6 text-right" style="padding-right: 25px;">
         <!-- <button type="button" class="btn btn-info btn-sm" ><span class="glyphicon glyphicon-lock"></span> 修改密码</button> -->
         <button type="button" class="btn btn-bg btn-info btn-sty"  ><span class="glyphicon glyphicon-circle-arrow-left"></span>
           <a href="index.html" onclick="return confirm('您确定要退出系统吗？');">
             <font color=#20517A>退出系统</font>
           </a>
         </button>
         <p><font color=#ffffff><span> 用户：{{functions.name}} </span> 欢迎您访问！{{ nowDate }}</font> </p>
      </div>
    </header>
    <section class='span'>
      <div class='container-fluid'>
        <div class='row'>
          <div class="col-md-3">
              <left-tree class='left-bg' :functions='functions' :userid='userid'></left-tree>
          </div>

          <div class="col-md-9" >
            <dynamic :comps='[]' name='main' class="right-bg"></dynamic>
          </div>
        </div>
      </div>
    </section>
    <footer>
     <h5 class="text-center">当前版本号：V1.0.0</h5>
    </footer>
</div>
</template>

<script>
import * as Util from '../Util'

export default {
  title: '主界面',
  props: ['functions', 'userid'],
  computed: {
    nowDate () {
      return Util.getNowDate()
    }
  }
}
</script>
<style>

  /*有上角按钮样式*/
  .btn-sty{margin:15px 0px 15px 0px; font-size:14px; background: #b9cae4;}
  /*左侧树背景*/
  .left-bg{
    height:100%;
    margin: 0px 15px;
    background:#dae4f2;
    border-radius:5px;
    padding:10px;
  }

  /*右侧区域的背景*/
  .right-bg {
    display: block;
    background:#dae4f2;
    height:100%;
    border-radius: 5px 5px 5px 5px;
    /*padding:0px 15px 15px 0px;*/
    margin-right: 15px;
    font-size: 1.2em;
    font-family: 微软雅黑;
  }
  /*为所有输入框配置一个背景颜色,当获取焦点后颜色变白*/
  input.form-control { height: auto;background: #d7e7f6; }
  input:focus { background:#fff; border: solid 1px #9cb9da; }
  textarea.form-control { height: auto;background: #d7e7f6; }
  textarea:focus { background:#fff; border: solid 1px #9cb9da; }
  select.form-control { height: auto;background: #d7e7f6; }
  select:focus { background:#fff; border: solid 1px #9cb9da; }

    /*表格扩充元素*/
  /*表体的背景颜色*/
  .table-hover {background-color: #bdcde3;}
  /*表头颜色*/
  .table-hover thead tr th {background-color: #93a8cc; padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none; text-align:center; color:white;}
  /*将td元素放大一点*/
  .table-hover > tbody > tr > td{ padding:5px; border-left:solid 1px #dae4f2; border-top:solid 1px #dae4f2; border-right: none;border-bottom: none;}
  /*当鼠标移动到这一行上时的背景颜色，bootstrap也有这个效果，不过颜色不好看*/
  .table-hover > tbody > tr:hover {
    background-color: #a8bad4;
  }

  .list-group {
    margin-bottom: 0px!important;
  }
  input[type='checkbox'] {
    width: 20px;
    height: 20px;
  }

</style>
